<template>
  <div class="mineIndex">
    <van-cell-group>
      <!-- 用户基本信息 -->
      <van-cell class="header">
      <!-- 展示头像 -->
        <van-image
          round
          width="50"
          height="50"
          :src="user.portrait || 'https://s0.lgstatic.com/common/image/pc/default_boy_headpic1.png'"
        />
      <!-- 用户基本信息 -->
        <div class="userInfo">
          <h3>{{user.weixinNickName}}</h3>
          <div>
            <van-icon class="edit-Icon" name="edit"/>
            <span>编辑个人资料</span>
          </div>
        </div>
      </van-cell>
      <!-- 账号信息 -->
      <van-cell class="account-info">
        <van-grid>
          <van-grid-item>
            <span>1522</span>
            <span>学习时长</span>
          </van-grid-item>
          <van-grid-item>
            <span>352</span>
            <span>钱包/勾豆</span>
          </van-grid-item>
          <van-grid-item>
            <span>2</span>
            <span>优惠券</span>
          </van-grid-item>
          <van-grid-item>
            <span>233</span>
            <span>学分</span>
          </van-grid-item>
        </van-grid>
      </van-cell>
      <van-cell title="分销中心" icon="user-o" is-link value="收益200元" />
      <van-cell title="个性化设置" icon="setting-o" is-link />
      <van-cell title="我的下载" icon="down" is-link />
      <van-cell title="帮助与反馈" icon="question-o" is-link />
      <van-cell title="关于拉勾教育" icon="info-o" is-link value="v2.0.0" />
    </van-cell-group>
  </div>
</template>

<script>
import { CellGroup, Cell, Image, Icon, Grid, GridItem } from 'vant'
import { getInfo } from '@/services/login'
export default {
  name: 'mineIndex',
  components: {
    VanCellGroup: CellGroup,
    VanCell: Cell,
    VanImage: Image,
    VanIcon: Icon,
    VanGrid: Grid,
    VanGridItem: GridItem
  },
  data () {
    return {
      user: {}
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      const { data } = await getInfo()
      if (data.state === 1) {
        this.user = data.content
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header{
background-color: #f89603;
padding: 30px 20px 0;
  .van-cell__value{
    height: 56px;
    display: flex;
    justify-content: flex-start;
    .userInfo{
      margin-left: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h3{
        margin: 0;
        font-size: 18px;
      }
      div{
        span{
          margin-left: 5px;
          vertical-align: 3px
        }
      }
    }
  }
}
.account-info{
  margin-top:-1px;
  background-color: #f89603;
  .van-cell__value{
    border-radius: 15px;
    .van-grid-item__content{
      span:nth-child(1){
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
}

</style>
